<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豆瓣</title>

    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="common.css">
    <!-- 引入本页面样式 -->
    <link rel="stylesheet" href="db.css">

    <!-- 这个是设置你那个网页的图标的 -->
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">

</head>


<body>

    <!-- 页面总体容器 -->
    <div class="db">

        <!-- 头部区域:分成三个部分 -->
        <header class="header">
            <!-- 外面再套一个容器，便于居中 -->
            <div class="container clearfix">

                <div class="logo left">

                    <h1>
                        <a href="">
                            <span> 豆瓣</span>
                        </a>
                    </h1>

                    <!-- 我们这里使用i和a元素，而不是使用a和img元素
              <a href=""><img src="./img/db.jpg" alt=""></a> -->

                </div>


                <div class="search left">


                    <!-- 这里用form套着是因为要做成，你输入内容，然后按回车可以
               实现搜索，刷新页面的作用 -->

                    <form action="">

                        <input type="text" class="txt" placeholder="电影、书籍、音乐、小组、小站、成员">

                        <button>
                            <i class="iconfont iconsousuo"></i>
                        </button>

                    </form>


                </div>

                <div class="menu right chearfix">

                    <!-- 这里也可以用ul和li来写，但是用ul和li来写导航菜单的话，
              一般是在有子菜单的话，我们才会这样写，没有子菜单我们
              直接这样写。 -->

                    <!-- 这里的每一个a元素，它们都有相同的背景图，但是它们背景图
                 的位置是不一样的，那么这就需要我们为每一个a元素设置一个
                 内样式，来调整它背景图的位置。 -->

                    <a href="" class="menu-read"></a>
                    <a href="" class="menu-movie"></a>
                    <a href="" class="menu-music"></a>
                    <a href="" class="menu-group"></a>
                    <a href="" class="menu-city"></a>
                    <a href="" class="menu-fm"></a>
                    <a href="" class="menu-time"></a>
                    <a href="" class="menu-dopin"></a>


                </div>

            </div>

        </header>

        <!-- 横幅区域 -->
        <div class="banner">

            <div class="container containercenter clearfix">

                <!-- 这里使用了右浮动的样式.right让这个被引入的页面在右边。 -->
                <iframe class="right loginarea" src="./loginframe.html" frameborder="0"></iframe>

                <div class="slogan right">
                    <h1 class="title">豆瓣
                        <span>6.0</span>
                    </h1>

                    <!-- 下载区 -->
                    <div class="download">

                        <button class="btn">下载豆瓣 App</button>

                        <div class="qrcode">

                            <img src="./img/qrcode2.png" alt="">

                            <!-- 二维码图片 -->
                            <div class="qrcodeimage hidden">

                                <img src="./img/qrcode.png" alt="">
                                <p>iOS / Android 扫码直接下载</p>

                            </div>

                        </div>


                    </div>
                </div>


            </div>

        </div>


        <!-- 主区域样式 -->
        <div>

            <!-- 热点内容区域 -->
            <div class="section">

                <div class="container clearfix">


                    <!-- 右边栏 -->
                    <div class="aside-right">

                        <!-- 右边的广告图片 -->
                        <div class="adv">

                            <a href="">
                                <!-- 属于页面内容的用img
                       装饰的用背景图片 -->
                                <img src="./img/ggt.jpg" alt="">
                            </a>


                        </div>

                        <div class="section-title">

                            <h3 class="title">热门话题</h3>

                            <span class="link">

                                <a href="">去话题广场</a>

                            </span>


                        </div>

                        <ul class="hot-list">

                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>

                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>

                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录
                                        <span class="adv-tag"></span>
                                    </a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>


                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>


                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>


                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>


                            <li>

                                <div class="title">

                                    <a href="">视频·城市废墟探险实录</a>

                                </div>

                                <div class="desc">

                                    <span>新话题</span>

                                    <span>394391人浏览</span>

                                </div>

                            </li>




                        </ul>

                    </div>



                    <!-- 中间栏 -->
                    <div class="main">

                        <div class="section-title">

                            <h3 class="title">热门内容</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <div class="hot-main clearfix">

                            <div class="left">

                                <ul>

                                    <li>

                                        <!-- li里面又图片，有文字。 -->

                                        <div class="img">

                                            <a href=""><img src="./img/conver3.webp" alt=""></a>

                                        </div>

                                        <div class="words">

                                            <a
                                                href="">如今我想我能做到的是，今天我比昨天的我要更好。如今我想我能做到的是，今天我比昨天的我要更好。如今我想我能做到的是，今天我比昨天的我要更好。如今我想我能做到的是，今天我比昨天的我要更好。如今我想我能做到的是，今天我比昨天的我要更好。</a>

                                            <span>76张照片</span>

                                        </div>


                                    </li>

                                    <li>

                                        <!-- li里面又图片，有文字。 -->

                                        <div class="img">

                                            <a href=""><img src="./img/conver2.webp" alt=""></a>

                                        </div>

                                        <div class="words">

                                            <a href="">如今我想我能做到的是，今天我比昨天的我要更好。</a>

                                            <span>76张照片</span>

                                        </div>


                                    </li>


                                    <li>

                                        <!-- li里面又图片，有文字。 -->

                                        <div class="img">


                                            <a href=""><img src="./img/conver1.webp" alt=""></a>

                                        </div>

                                        <div class="words">

                                            <a href="">如今我想我能做到的是，今天我比昨天的我要更好。</a>

                                            <span>76张照片</span>

                                        </div>


                                    </li>



                                    <li>

                                        <!-- li里面又图片，有文字。 -->

                                        <div class="img">

                                            <a href="">
                                                <img src="./img/conver4.webp" alt="">
                                            </a>

                                        </div>

                                        <div class="words">

                                            <a href="">如今我想我能做到的是，今天我比昨天的我要更好。</a>

                                            <span>76张照片</span>

                                        </div>


                                    </li>




                                </ul>




                            </div>

                            <div class="right">

                                <ul>
                                    <li>

                                        <a href="">89年私人观影整理</a>

                                        <div class="title">
                                            嘉措的日记
                                        </div>
                                        <div class="desc">

                                            假作真时真亦假，无为有处有还无。 这一年的电影大概一共补了七十五部长篇，总的来...

                                        </div>
                                    </li>

                                    <li><a href="">披星戴月，表里山河（四）</a></li>
                                    <li><a href="">七年不太痒｜我和胖先生的土味爱情故事</a></li>
                                    <li><a href="">边城｜这个人也许永远不回来了，也许明天回来</a></li>
                                    <li><a href="">盛夏乐山的美食散步</a></li>
                                    <li><a href="">臭小孩</a></li>
                                    <li><a href="">贫穷中年生存指南（一）</a></li>
                                    <li><a href="">那年，夏天</a></li>
                                    <li><a href="">我们心中的哪吒</a></li>
                                    <li><a href="">栀子：不热烈，不成花</a></li>
                                    <li><a href="">令你印象深刻的词源</a></li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            <!-- 豆瓣时间 -->
            <div class="section">

                <div class="container clearfix">

                    <div class="aside-left">

                        <h2 class="title">

                            <a href="" class="dark-color">豆瓣时间</a>

                        </h2>

                    </div>

                    <div class="main">

                        <div class="section-title">

                            <h3 class="title">热门专栏</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <div class="time-main">

                            <ul>

                                <!-- 每一个列表项由二个部分组成。 -->
                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj1.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                    一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>

                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj2.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                              一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>

                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj3.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                      一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>

                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj4.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                              一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj5.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                      一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj6.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                              一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj7.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                                      一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj8.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                                              一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj9.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                                                      一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>


                                <li>
                                    <!-- 第一部分是一张图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dbsj10.jpg" alt="">
                                        </a>
                                    </div>

                                    <!-- 第二部分是一段用a标签包裹起来的文字和
                                                                                                              一段用span包裹起来的文字。       -->
                                    <div class="words">
                                        <a href="">
                                            世界记忆大师教你快速提升记忆力
                                        </a>

                                        <span>视频专栏</span>
                                    </div>




                                </li>

                            </ul>

                        </div>


                    </div>
                </div>

            </div>


            <!-- 视频 -->
            <div class="section">

                <div class="container clearfix">

                    <!-- 左边 -->
                    <div class="aside-left">

                        <h2 class="title">

                            <a href="" class="dark-color">视频</a>

                        </h2>


                    </div>

                    <!-- 中间 -->
                    <div class="main video-main">

                        <div class="section-title">

                            <a href="">
                                <h3 class="title">瓣嘴</h3>
                            </a>

                            <ul class="item-list">

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz1.jpg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="https://movie.douban.com/trailer/235621/">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz2.jpeg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz3.jpg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>


                            </ul>
                        </div>



                        <div class="section-title">

                            <a href="">
                                <h3 class="title">观影会客厅</h3>
                            </a>

                            <ul>

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz4.jpg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz5.jpg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>

                                <li>
                                    <!-- 两个区域：一个是图片区域，一个文字区域 -->
                                    <a href="">
                                        <div class="img iconfont iconarrow-">


                                            <img src="./img/bz6.jpg" alt="">


                                        </div>

                                    </a>

                                    <div class="words">

                                        <a href="">

                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语

                                        </a>

                                    </div>

                                </li>

                            </ul>

                        </div>




                    </div>

                </div>

            </div>

            <!-- 电影 -->
            <div class="section">

                <div class="container clearfix">

                    <!-- 左边 -->
                    <div class="aside-left">

                        <h2 class="title dybt">

                            <a href="">电影</a>

                        </h2>

                        <!-- 左边的菜单 -->
                        <nav class="left-menu">

                            <ul class="clearfix">
                                <li><a href="">影讯&购票</a></li>
                                <li><a href="" class="new">选电影</a></li>
                                <li><a href="">排行榜</a></li>
                                <li><a href="">分类</a></li>
                                <li><a href="">影评</a></li>
                                <li><a href="">预告片</a></li>
                                <li><a href="">问答</a></li>

                            </ul>

                        </nav>

                    </div>


                    <!-- 中间 -->
                    <div class="main tengshu">

                        <!-- 标题 -->
                        <div class="section-title">

                            <h3 class="title">正在热映</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>

                        </div>

                        <div class="movie-area">

                            <ul class="time-list">

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy1.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy5.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy3.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy4.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy5.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>


                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy6.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy5.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                                <li>

                                    <!-- 电影图片 -->
                                    <div class="img">
                                        <a href="">
                                            <img src="./img/dy2.webp" alt="">
                                        </a>
                                    </div>
                                    <!-- 电影名称 -->
                                    <div class="words">
                                        <a href="">上海堡垒</a>
                                    </div>
                                    <!-- 评分 -->
                                    <div class="star">

                                        <span class="star45 star-bg">



                                        </span>

                                        <span class="number">

                                            9.5

                                        </span>

                                    </div>
                                    <!-- 购票选座 -->
                                    <div class="func">

                                        <a href="" class="block-link">

                                            选座购票

                                        </a>

                                    </div>

                                </li>

                            </ul>

                        </div>
                    </div>


                    <!-- 右边 -->
                    <div class="ts aside-right movie-area">

                        <!-- 标题 -->
                        <div class="section-title">

                            <h3 class="title">影片分类</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>

                        </div>

                        <ul class="right-menu-list clearfix">

                            <li><a href="">爱情</a></li>
                            <li><a href=""> 喜剧</a></li>
                            <li><a href=""> 剧情</a></li>
                            <li><a href=""> 动画</a></li>
                            <li><a href="">科幻</a></li>
                            <li><a href="">动作 </a></li>
                            <li><a href="">经典 </a></li>
                            <li><a href=""> 悬疑</a></li>
                            <li><a href="">犯罪</a></li>
                            <li><a href=""> 青春</a></li>
                            <li><a href=""> 文艺</a></li>
                            <li><a href=""> 搞笑</a></li>
                            <li><a href=""> 惊悚</a></li>
                            <li><a href=""> 励志</a></li>
                            <li><a href="">香港</a></li>
                            <li><a href="">中国</a></li>
                            <li><a href=""> 纪录片</a></li>
                            <li><a href="">黑色幽默</a></li>
                            <li><a href="">战争</a></li>
                            <li><a href=""> 恐怖</a></li>
                            <li><a href="">美国</a></li>
                            <li><a href="">日本</a></li>
                            <li><a href="">香港</a></li>
                            <li><a href=""> 法国</a></li>
                            <li><a href=""> 台湾</a></li>
                            <li><a href=""> 搞笑</a></li>
                            <li><a href=""> 惊悚</a></li>
                            <li><a href=""> 励志</a></li>
                            <li><a href="">香港</a></li>
                            <li><a href="">中国</a></li>
                            <li><a href=""> 纪录片</a></li>
                            <li><a href="">黑色幽默</a></li>
                            <li><a href="">战争</a></li>


                        </ul>


                        <!-- 标题 -->
                        <div class="section-title">

                            <h3 class="title">近期热门</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>

                        </div>


                        <ul class="order-movie-list">

                            <li><a href="">寄生虫</a></li>
                            <li><a href="">恶人传</a></li>
                            <li><a href="">追龙2</a></li>
                            <li><a href="">速度与激情20</a></li>
                            <li><a href="">沦落人</a></li>
                            <li><a href="">全职高手</a></li>
                            <li><a href="">沉默的证人</a></li>
                            <li><a href="">名侦探柯南</a></li>
                            <li><a href="">好莱坞往事</a></li>
                            <li><a href="">孟买酒店</a></li>



                        </ul>

                    </div>

                </div>

            </div>

            <!-- 小组 -->

            <div class="section">

                <div class="container group-area clearfix">

                    <!-- 左边 -->
                    <div class="aside-left">

                        <div class="title">

                            <h2>

                                <a href="">小组</a>

                            </h2>

                        </div>


                        <!-- 左边的菜单 -->
                        <nav class="left-menu">

                            <ul>
                                <li><a href="">精选</a></li>
                                <li><a href="" class="new">文化</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">音乐</a></li>
                                <li><a href="">影评</a></li>
                                <li><a href="">预告片</a></li>
                                <li><a href="">问答</a></li>

                            </ul>

                        </nav>

                    </div>

                    <!-- 中间 -->
                    <div class="main ttss">

                        <div class="section-title">

                            <h3 class="title">热门小组</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <ul class="time-list">

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz1.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz1.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz1.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz1.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">™帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                            <li>

                                <!-- 图片 -->
                                <div class="img">
                                    <a href=""><img src="./img/xz2.webp" alt=""></a>
                                </div>

                                <!-- 文本 -->
                                <div class="words">

                                    <a href="">帮帮组™加入这个组就有人帮你了！</a>

                                    <span>16518 个成员</span>
                                </div>

                            </li>

                        </ul>

                    </div>



                    <!-- 右边 -->
                    <div class="aside-right">

                        <!-- 标题 -->
                        <div class="section-title">

                            <h3 class="title">小组分类</h3>
                        </div>

                        <div class="group">

                            <div class="group-name">

                                <a href="">兴趣</a>

                            </div>

                            <ul class="right-menu-list clearfix">

                                <li><a href="">爱情</a></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>

                        <div class="group">

                            <div class="group-name">

                                <a href="">兴趣</a>

                            </div>

                            <ul class="right-menu-list clearfix">

                                <li><a href="">爱情</a></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <div class="group-name">

                                <a href="">兴趣</a>

                            </div>

                            <ul class="right-menu-list clearfix">

                                <li><a href="">爱情</a></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <div class="group-name">

                                <a href="">兴趣</a>

                            </div>

                            <ul class="right-menu-list clearfix">

                                <li><a href="">爱情</a></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <div class="group-name">

                                <a href="">兴趣</a>

                            </div>

                            <ul class="right-menu-list clearfix">

                                <li><a href="">爱情</a></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>

                    </div>


                </div>

            </div>


            <!-- 读书 -->
            <div class="section">

                <div class="container clearfix book-area">

                    <!-- 左边 -->
                    <div class="aside-left">

                        <div class="title">

                            <h2>

                                <a href="" class="dark-color">读书</a>

                            </h2>

                        </div>


                        <!-- 左边的菜单 -->
                        <nav class="left-menu">

                            <ul>
                                <li><a href="">精选</a></li>
                                <li><a href="" class="new">文化</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">音乐</a></li>
                                <li><a href="">影评</a></li>
                                <li><a href="">预告片</a></li>
                                <li><a href="">问答</a></li>

                            </ul>

                        </nav>

                        <!-- 图片 -->
                        <div class="menu-adv">

                            <a href="">
                                <span class="app-icon-1"></span>
                            </a>

                            <a href="" class="dark-color">豆瓣阅读</a>


                        </div>

                    </div>


                    <div class="aside-right">

                        <div class="section-title">

                            <h3 class="title">热门标签</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>

                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>


                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>

                        <div class="group">

                            <ul class="right-menu-list clearfix">


                                <li><span>爱情</span></li>
                                <li><a href=""> 喜剧</a></li>
                                <li><a href=""> 剧情</a></li>
                                <li><a href=""> 动画</a></li>
                                <li><a href="">科幻</a></li>
                                <li><a href="">动作 </a></li>
                                <li><a href="">经典 </a></li>
                                <li><a href=""> 悬疑</a></li>
                                <li><a href="">犯罪</a></li>
                                <li><a href=""> 青春</a></li>
                                <li><a href=""> 文艺</a></li>
                                <li><a href=""> 搞笑</a></li>
                                <li><a href=""> 惊悚</a></li>
                                <li><a href=""> 励志</a></li>
                                <li><a href="">香港</a></li>
                                <li><a href="">中国</a></li>
                                <li><a href=""> 纪录片</a></li>
                                <li><a href="">黑色幽默</a></li>



                            </ul>

                        </div>

                    </div>


                    <div class="main">

                        <div class="section-title">

                            <h3 class="title">新书速递</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>




                        </div>

                        <ul class="time-list">

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus1.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus2.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus3.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus4.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                        </ul>

                        <div class="section-title">

                            <h3 class="title">原创数字作品</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>




                        </div>

                        <ul class="time-list">

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus5.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus6.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus7.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href=""><img src="./img/dus8.jpg" alt=""></a>

                                </div>

                                <div class="words">

                                    <a href="" class="dark-color">镖人</a>

                                    <span>许先哲</span>

                                    <div class="func">

                                        <a href="" class="block-link">免费试读</a>

                                    </div>

                                </div>

                            </li>

                        </ul>

                    </div>
                </div>

            </div>


            <!-- 音乐 -->
            <div class="section">

                <div class="container clearfix music-area">


                    <div class="aside-left">

                        <!-- 标题 -->
                        <div class="title">

                            <h2>

                                <a href="" class="dark-color">音乐</a>

                            </h2>

                        </div>

                        <!-- 左边的菜单 -->
                        <nav class="left-menu">

                            <ul>
                                <li><a href="">音乐人</a></li>
                                <li><a href="" class="new">文化</a></li>
                                <li><a href="">金毛人计划</a></li>
                                <li><a href="" class="new">专题</a></li>
                                <li><a href="">影评</a></li>
                                <li><a href="">排行榜</a></li>
                                <li><a href="">问答</a></li>

                            </ul>

                        </nav>

                        <!-- 图片 -->
                        <div class="menu-adv">

                            <a href="">
                                <span class="app-icon-2"></span>
                            </a>

                            <a href="" class="dark-color">豆瓣FM</a>


                        </div>

                        <!-- 图片 -->
                        <div class="menu-adv">

                            <a href="">
                                <span class="app-icon-3"></span>
                            </a>

                            <a href="" class="dark-color">豆瓣音乐人</a>


                        </div>

                    </div>

                    <div class="aside-right">

                        <div class="section-title">

                            <h3 class="title">本周流行音乐人</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <div class="music-player-list">

                            <ul>



                                <li class="clearfix">

                                    <span class="number left ">1.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music2.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>


                                <li class="clearfix">

                                    <span class="number left ">2.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music3.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>


                                <li class="clearfix">

                                    <span class="number left ">3.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music1.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>



                                <li class="clearfix">

                                    <span class="number left ">4.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music1.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>


                                <li class="clearfix">

                                    <span class="number left ">5.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music2.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>

                                <li class="clearfix">

                                    <span class="number left ">6.</span>

                                    <div class="player right">

                                        <a href="">
                                            <div class="img left iconfont iconbofang2">

                                                <img src="./img/music3.jpg" alt="">

                                            </div>
                                        </a>

                                        <div class="words left">

                                            <a href="">Hiperson/海朋森</a>
                                            <span>流派: 摇滚 Rock </span>
                                            <span>2073人关注</span>
                                        </div>




                                    </div>

                                </li>

                            </ul>

                        </div>

                    </div>

                    <div class="main">

                        <div class="section-title">

                            <h3 class="title">豆瓣新碟榜</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <ul class="time-list">

                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>

                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>


                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>


                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>


                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>


                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>


                            <li>

                                <div class="img">

                                    <a href="">
                                        <img src="./img/yy1.jpg" alt="">
                                    </a>

                                </div>

                                <div class="words">

                                    1.<a href=""> 乐队的夏天 第11期</a>

                                </div>

                                <div class="words">

                                    <a href="">

                                        新裤子 刺猬 Click#15 </a>

                                </div>

                                <div class="star">

                                    <span class="star45 star-bg">



                                    </span>

                                    <span class="number">

                                        9.5

                                    </span>

                                </div>

                            </li>

                        </ul>

                        <div class="section-title">

                            <h3 class="title">热门歌单</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <ul class="time-list hot-music">

                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>

                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>


                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>



                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>



                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>


                            <li>

                                    <a href="">
                                <div class="img iconfont iconarrow-">

                                   <img src="./img/yy3.jpg" alt="">

                                </div>
                            </a>
                                <div class="words">

                                    给我一段音乐，推开看得见风...

                                </div>

                            </li>

                      
                        </ul>
                    </div>



                </div>

            </div>

            <!-- 豆品 -->
            <div class="section">

              <div class="container clearfix doupin-area">

               <div class="aside-left">

                    <div class="title">

                            <h2>

                                <a href="" class="dark-color">豆品</a>

                            </h2>

                        </div>


               </div>



               <div class="aside-right">

               
                    <div class="section-title">

                            <h3 class="title">热门活动</h3>      
                    </div>

                    <div class="adv">

                     <a href="">

                  <img src="./img/doupin1.jpg" alt="">

                     </a>

                    </div>

                    <div>

                   <a href="">我的豆瓣收藏夹里有什么</a>

                    </div>


                    <div class="section-title">

                            <h3 class="title">官方小组</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

               </div>



               <div class="main">

                    <div class="section-title">

                            <h3 class="title">热卖商品</h3>

                            <span class="link">

                                <a href="">更多</a>

                            </span>


                        </div>

                        <ul class="time-list">

                     <li>

                     <div class="img">

                   <a href="">

                    <img src="./img/doupin2.jpg" alt="">

                   </a>

                     </div>

                     <div class="words clearfix">

                      <a href="" class="left">豆瓣冻顶乌龙茶</a>

                      <span class="right">￥59.00</span>

                     </div>

                     </li>

                     <li>

                            <div class="img">
       
                          <a href="">
       
                           <img src="./img/doupin2.jpg" alt="">
       
                          </a>
       
                            </div>
       
                            <div class="words clearfix">
       
                             <a href="" class="left">豆瓣冻顶乌龙茶</a>
       
                             <span class="right">￥59.00</span>
       
                            </div>
       
                            </li>

                            <li>

                                    <div class="img">
               
                                  <a href="">
               
                                   <img src="./img/doupin2.jpg" alt="">
               
                                  </a>
               
                                    </div>
               
                                    <div class="words clearfix">
               
                                     <a href="" class="left">豆瓣冻顶乌龙茶</a>
               
                                     <span class="right">￥59.00</span>
               
                                    </div>
               
                                    </li>


                                       <li>

                     <div class="img">

                   <a href="">

                    <img src="./img/doupin2.jpg" alt="">

                   </a>

                     </div>

                     <div class="words clearfix">

                      <a href="" class="left">豆瓣冻顶乌龙茶</a>

                      <span class="right">￥59.00</span>

                     </div>

                     </li> 

                    </ul>


               </div>

              </div>

            </div>

            <!-- 同城 -->
            <div class="section">

              <div class="container clearfix city-area">

                <div class="aside-left">

                        <div class="title">

                                <h2>
    
                                    <a href="" class="dark-color">同城</a>
    
                                </h2>
    
                            </div>

                            <nav class="left-menu">

                                    <ul>
                                        <li><a href="">近期活动</a></li>
                                        <li><a href="" >举办方</a></li>
                                        <li><a href="">舞台剧</a></li>
                                      
        
                                    </ul>
        
                                </nav>  

                </div>


                <div class="aside-right">

                        <div class="section-title">

                                <h3 class="title">活动标签</h3>
                            </div>
    
                            <div class="group">
    
                                <div class="group-name">
    
                                    <a href="">兴趣</a>
    
                                </div>
    
                                <ul class="right-menu-list clearfix">
    
                                    <li><a href="">爱情</a></li>
                                    <li><a href=""> 喜剧</a></li>
                                    <li><a href=""> 剧情</a></li>
                                    <li><a href=""> 动画</a></li>
                                    <li><a href="">科幻</a></li>
                                    <li><a href="">动作 </a></li>
                                    <li><a href="">经典 </a></li>
                                    <li><a href=""> 悬疑</a></li>
                                    <li><a href="">犯罪</a></li>
                                    <li><a href=""> 青春</a></li>
                                    <li><a href=""> 文艺</a></li>
                                    <li><a href=""> 搞笑</a></li>
                                    <li><a href=""> 惊悚</a></li>
                                    <li><a href=""> 励志</a></li>
                                    <li><a href="">香港</a></li>
                                    <li><a href="">中国</a></li>
                                    <li><a href=""> 纪录片</a></li>
                                    <li><a href="">黑色幽默</a></li>
    
    
    
                                </ul>
    
                            </div>
    
                            <div class="group">
    
                                <div class="group-name">
    
                                    <a href="">兴趣</a>
    
                                </div>
    
                                <ul class="right-menu-list clearfix">
    
                                    <li><a href="">爱情</a></li>
                                    <li><a href=""> 喜剧</a></li>
                                    <li><a href=""> 剧情</a></li>
                                    <li><a href=""> 动画</a></li>
                                    <li><a href="">科幻</a></li>
                                    <li><a href="">动作 </a></li>
                                    <li><a href="">经典 </a></li>
                                    <li><a href=""> 悬疑</a></li>
                                    <li><a href="">犯罪</a></li>
                                    <li><a href=""> 青春</a></li>
                                    <li><a href=""> 文艺</a></li>
                                    <li><a href=""> 搞笑</a></li>
                                    <li><a href=""> 惊悚</a></li>
                                    <li><a href=""> 励志</a></li>
                                    <li><a href="">香港</a></li>
                                    <li><a href="">中国</a></li>
                                    <li><a href=""> 纪录片</a></li>
                                    <li><a href="">黑色幽默</a></li>
    
    
    
                                </ul>
    
                            </div>
    
    
                            <div class="group">
    
                                <div class="group-name">
    
                                    <a href="">兴趣</a>
    
                                </div>
    
                                <ul class="right-menu-list clearfix">
    
                                    <li><a href="">爱情</a></li>
                                    <li><a href=""> 喜剧</a></li>
                                    <li><a href=""> 剧情</a></li>
                                    <li><a href=""> 动画</a></li>
                                    <li><a href="">科幻</a></li>
                                    <li><a href="">动作 </a></li>
                                    <li><a href="">经典 </a></li>
                                    <li><a href=""> 悬疑</a></li>
                                    <li><a href="">犯罪</a></li>
                                    <li><a href=""> 青春</a></li>
                                    <li><a href=""> 文艺</a></li>
                                    <li><a href=""> 搞笑</a></li>
                                    <li><a href=""> 惊悚</a></li>
                                    <li><a href=""> 励志</a></li>
                                    <li><a href="">香港</a></li>
                                    <li><a href="">中国</a></li>
                                    <li><a href=""> 纪录片</a></li>
                                    <li><a href="">黑色幽默</a></li>
    
    
    
                                </ul>
    
                            </div>
    
    
                          
    

                </div>

     
                <div class="main">

                        <div class="section-title">

                                <h3 class="title">北京 · 本周热门活动</h3>
    
                                <span class="link">
    
                                    <a href="">更多</a>
    
                                </span>
    
    
                        </div>
                        

                      <ul class="time-list">

                       <li class="clearfix">


                         <div class="img left">

                   <a href="">

                    <img src="./img/tc1.jpg" alt="">

                   </a>

                         </div>

                        <div class="words ">

                       <a href="">五月天Mayday 2019演唱会北京站</a>
             
                        <span>8月23日 周五 - 8月25日 周日</span>

                        <span>鸟巢（国家体育场） 北京市..</span>

                        <span>130人关注</span>
                        
                        </div> 

                       </li>

                       <li class="clearfix">


                            <div class="img left">
   
                      <a href="">
   
                       <img src="./img/tc2.jpg" alt="">
   
                      </a>
   
                            </div>
   
                           <div class="words ">
   
                          <a href="">五月天Mayday 2019演唱会北京站</a>
                
                           <span>8月23日 周五 - 8月25日 周日</span>
   
                           <span>鸟巢（国家体育场） 北京市..</span>
   
                           <span>130人关注</span>
                           
                           </div> 
   
                          </li>

                          <li class="clearfix">


                                <div class="img left">
       
                          <a href="">
       
                           <img src="./img/tc3.jpg" alt="">
       
                          </a>
       
                                </div>
       
                               <div class="words ">
       
                              <a href="">五月天Mayday 2019演唱会北京站</a>
                    
                               <span>8月23日 周五 - 8月25日 周日</span>
       
                               <span>鸟巢（国家体育场） 北京市..</span>
       
                               <span>130人关注</span>
                               
                               </div> 
       
                              </li>


                              <li class="clearfix">


                                    <div class="img left">
           
                              <a href="">
           
                               <img src="./img/tc4.jpg" alt="">
           
                              </a>
           
                                    </div>
           
                                   <div class="words ">
           
                                  <a href="">五月天Mayday 2019演唱会北京站</a>
                        
                                   <span>8月23日 周五 - 8月25日 周日</span>
           
                                   <span>鸟巢（国家体育场） 北京市..</span>
           
                                   <span>130人关注</span>
                                   
                                   </div> 
           
                                  </li>




                      </ul>  

                </div>

              </div>

            </div>




            <!-- 页脚 -->
          
            <footer class="footer">

             <div class="container clearfix">


               <div class="left">

                    <p>© 2005－2019 douban.com, all rights reserved 北京豆网科技有限公司</p>

  
                    <p><a href="">京ICP证090015号 </a>京ICP备11027288号 网络视听许可证号<a href="">0110418</a></p>


                    <p>京网文[2015]2026-368号  <img src="./img/yj1.gif" alt=""> <a href="">京公网安备11010502000728</a>  新出网证(京)字129号</p>

                    <p>违法和不良信息举报电话：4008353331-9 <img src="./img/yj3.jpg" alt=""></p>

                    <p><img src="./img/yj2.png" alt=""><a href=""> 中国互联网举报中心  </a> 电话：12377<a href="">新出发京批字第直160029号</a></p>
               </div>


               <div class="right">

                 <nav class="menu">

               <a href="">关于豆瓣</a>·
               <a href="">在豆瓣工作</a>·
               <a href="">联系我们</a>·
               <a href="">法律声明</a>·
               <a href="">帮助中心</a>·
               <a href="">移动应用</a>·
               <a href="">豆瓣广告</a>
                 </nav>

                 <div class="adv">


                 <a href=""><img src="./img/file.jpg" alt=""></a>

                 </div>

               </div>

             </div>

            </footer>

        </div>


    </div>


</body>

</html>